<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*#canvas {
				animation: shift 3s infinite linear;
			}
			
			@-webkit-keyframes shift {
				from {
					transform: rotate(360deg);
				}
			}
			
			@keyframes shift {
				from {
					transform: rotate(360deg);
				}
			}*/
		</style>
	</head>

	<body>
		<canvas id="canvas" width="300" height="300"></canvas>
	</body>
	<script type="text/javascript">
		function draw() {
			var context = document.getElementById("canvas").getContext("2d");
			context.fillStyle = "red";
			context.translate(50, 50)
			context.fillRect(0, 0, 10, 30);

			var angle = 30 * Math.PI / 180;
			context.save();
			for(i = 0; i < 12; i++) {
				context.rotate(angle);
				r = 255 - i * 10;
				g = 255 - r;
				b = (r + g) / 255;
				color = "rgba(" + r + "," + g + "," + b + "," + 0.5 + ")";
				context.fillStyle = color;
				context.fillRect(0, 0, 10, 50);
			}
			context.restore();
		}
		draw();
	</script>

</html>